<template>
  <el-row>
    <el-row class="header" type="flex" justify="start" align="middle">
      <el-col :offset="15" :span="9">
        <div class="link"></div>
      </el-col>
    </el-row>

    <el-row class="login-container" type="flex" justify="center" align="middle">
      <el-col :span="3">
        <el-row class="app">
          <el-row class="qr">
            <el-row class="qrcode-contain" type="flex" justify="center" align="middle">
              <div class="qrcode"></div>
            </el-row>
            <el-row class="msg" type="flex" justify="center" align="middle"> 手机扫码安装 </el-row>
            <el-row class="msg" type="flex" justify="center" align="middle"> 苹果安卓APP </el-row>
          </el-row>
          <el-row type="flex" justify="center" align="middle">
            <span class="host">1388app.com</span>
          </el-row>
        </el-row>
      </el-col>
      <el-col :span="12" type="flex" justify="center" align="middle">
        <div class="year"></div>
      </el-col>
      <el-col :span="9">

        <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px">
          <h3 class="title">用户登录</h3>

          <el-alert class="tips" v-if="errorMsg.length>0" :title="errorMsg" type="error" show-icon :closable="false">
          </el-alert>

          <el-form-item prop="username">
            <span class="svg-container svg-container_login">
              <svg-icon icon-class="user" />
            </span>
            <el-input name="username" type="text" placeholder="账户" @keyup.enter.native="handleLogin" v-model="loginForm.username" autoComplete="on" clearable />
          </el-form-item>

          <el-form-item prop="password">
            <span class="svg-container">
              <svg-icon icon-class="password"></svg-icon>
            </span>
            <el-input name="password" :type="pwdType" placeholder="密码" @keyup.enter.native="handleLogin" v-model="loginForm.password"></el-input>
            <el-tooltip class="item" effect="light" content="显示/隐藏密码" placement="top">
              <span class="show-pwd" @click="showPwd">
                <i class="el-icon-view" v-if="openEye"></i>
                <svg-icon icon-class="eye" v-else/>
              </span>
            </el-tooltip>
          </el-form-item>

          <el-form-item prop="verifyCode">
            <span class="svg-container">
              <i class="el-icon-info"></i>
            </span>
            <el-input name="verifyCode" class="verify-code" type="text" placeholder="验证码" @keyup.enter.native="handleLogin" v-model="loginForm.verifyCode" clearable></el-input>
            <span class="show-code" @click="showCode">
              <img :src="validCode">
            </span>
          </el-form-item>

          <!--<el-row>-->
            <!--<van-checkbox v-model="isMobile" @change="changeIsMobile" style="margin:0 0 25px 10px;">手机浏览</van-checkbox>-->
          <!--</el-row>-->

          <el-form-item>
            <el-button type="warning" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
              登录
            </el-button>
          </el-form-item>
        </el-form>

      </el-col>

    </el-row>
  </el-row>

</template>

<script>
import { Message } from 'element-ui'
import { set as AuthSet, get as AuthGet } from '@/utils/auth'
import { Checkbox, CheckboxGroup } from 'vant'
export default {
  name: 'login',
  data() {
    return {
      loading: false,
      openEye: false,
      isMobile: null,
      validCode: '',
      pwdType: 'password',
      errorMsg: '',
      loginForm: {
        username: '',
        password: '',
        verifyCode: '',
      },
      loginRules: {
        username: [
          {
            type: 'string',
            required: true,
            trigger: 'blur',
            message: '请输入用户名',
            transform(value) {
              return value.trim()
            },
          },
        ],
        password: [
          {
            type: 'string',
            required: true,
            trigger: 'blur',
            message: '请输入密码',
          },
          {
            min: 6,
            max: 10,
            trigger: 'change',
            message: '长度在6-10位',
          },
          {
            pattern: /^[a-zA-Z0-9]+$/,
            trigger: 'blur',
            message: '只能输入英文字符和数字',
          },
        ],
        verifyCode: [
          {
            type: 'string',
            required: true,
            trigger: 'blur',
            message: '请输入验证码',
            transform(value) {
              return value.trim()
            },
          },
        ],
      },
    }
  },
  mounted() {
    // 获取验证码
    this.showCode()
    this.isMobile = AuthGet('isMobile') == 'true'
  },
  methods: {
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
      this.openEye = !this.openEye
    },
    showCode() {
      // 获取验证码
      this.validCode =
        process.env.BASE_API + '/users/gen-valid-code?v=' + Date.now() // 生产环境
    },
    // changeIsMobile(...args) {
    //   AuthSet('isMobile', args[0])
    // },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loginForm.isMobile = this.isMobile
          this.loginForm.username = this.loginForm.username.trim()
          this.loginForm.verifyCode = this.loginForm.verifyCode.trim()
          this.loading = true
          this.$store
            .dispatch('MemberLogin', this.loginForm)
            .then(response => {
              this.loading = false
              this.errorMsg = ''

              if (response && response.token) {
                // 登录成功
                this.$router.push({ path: '/agreement' })
              } else {
                // 失败
                this.errorMsg = Object.values(response)[0].toString()
              }
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('validate fail')
          return false
        }
      })
    },
  },
  components: {
    [Checkbox.name]: Checkbox,
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $bg: white;
  $dark_gray: #889aa4;
  $light_gray: #eee;
  $light_blue: #b3d8ff;
  $dark_blue: #ecf5ff;

  .header {
    height: 100px;
    width: 100%;
    .link {
      background: url(/static/member/pc/login_sgwin.png) no-repeat 0 0;
      width: 320px;
      height: 72px;
    }
  }

  .login-container {
    // position: fixed;
    // min-height: 100vh;
    // box-shadow: 3px 3px 20px red;
    padding: 30px 0;
    width: 100%;
    background-color: $bg;
    background: url(/static/member/pc/login_bg.jpg) no-repeat 0 0;
    background-size: 100% 100%;
    .app {
      width: 130px;
      .qr {
        background-color: rgb(218, 87, 32);
        border-radius: 0.5em;
        padding: 10px;
        .qrcode-contain {
          background-color: #fff;
          padding: 4px;
          width: 106px;
          margin: 0 auto;
          .qrcode {
            background: url(/static/member/pc/qrcode.png) no-repeat 0 0;
            width: 100px;
            height: 100px;
            background-size: 100% 100%;
          }
        }
        .msg {
          padding-top: 6px;
          color: #fff;
          font-size: 15px;
          font-weight: 800;
          font-style: italic;
        }
      }
      .host {
        color: #fff;
        text-align: center;
        font-size: 16px;
        font-style: italic;
        font-weight: 600;
        margin-top: 2px;
        letter-spacing: -0.5px;
      }
    }

    .year {
      background: url(/static/member/pc/login_2018.png) no-repeat 0 0;
      width: 611px;
      height: 369px;
      // background-size: 100% 100%;
    }
    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px white inset !important;
      -webkit-text-fill-color: black !important;
    }
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: black;
      height: 47px;
    }
    .el-input {
      display: inline-block;
      height: 47px;
      width: 73%;
      border: none;
    }
    .tips {
      font-size: 14px;
      margin-bottom: 10px;
    }
    .svg-container {
      padding: 6px 5px 6px 15px;
      color: $dark_gray;
      vertical-align: middle;
      width: 40px;
      display: inline-block;
      &_login {
        font-size: 20px;
      }
    }
    .title {
      font-size: 26px;
      font-weight: 400;
      color: $bg;
      margin: 0px auto 20px auto;
      text-align: center;
      font-weight: bold;
    }
    .login-form {
      // position: absolute;
      // left: 0;
      // right: 0;
      border-radius: 1em;
      background-color: #fff;
      background-color: rgba(0, 0, 0, 0.3);
      width: 400px;
      padding: 35px 35px 15px 35px;
      // margin: 0px auto;
      box-shadow: 0 0 15px #ffffff;
    }
    .el-form-item {
      // border: 1px solid $light_blue;
      background-color: #fff;
      border-radius: 5px;
      color: #454545;
    }
    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }
    .verify-code {
      width: 40%;
    }
    .show-code {
      position: absolute;
      right: 10px;
      width: 40%;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
      text-align: center;
    }
    .thirdparty-button {
      position: absolute;
      right: 35px;
      bottom: 28px;
    }
  }
</style>
